<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>收藏</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			text-decoration: none;
		}
		body{
			background: #3f3f3f;
		}
		#top ul li{
			margin: 0 20px 0 20px;
			color: #777777;
		}
		#top ul li a:hover{
			color: #ea6f5a;
		}
		#top input{
			border: 1px solid #3f3f3f;
			width:200px;
			height: 30px;
			border-radius:10px ;
			outline: none;
			padding-left: 17px;
			font-size: 1.1em;
			background-color: #4f4f4f;
			color: 
		}
		/*导航条*/
		#top{
			border-bottom: 1px solid gray;
			width:100%;height:30px;
			position:fixed;
			top:0;
			left:0;
			 height:60px;
			z-index: 100;
			background: #3f3f3f;
		
		}
		#top ul li{
			display: inline-block;
		}
		#top ul li .white{
			color: white;
		}
		#user{
			width: 88px;
			height: 26px;
			position: relative;
			margin-left: 1300px;
			margin-top: -26px;
		}
		#touxiang{
			text-align: center;
			width: 58px;
			height: 34px;
			margin-top: 10px;
			margin-left: 20px;
		}
		
		#touxiang .a_touxiang img{
			 	    width: 40px;
    				height: 40px;
    				padding: 10px;
    				border-radius: 50px;
    				position: relative;
    				right: 10%;
    				overflow: hidden;
    				margin-top: -25px; 

		}
		#touxiang a::before{
			content: "";
    		position: absolute;
    		top: 1px;
    		right: 8px;
    		border-left: 5px solid transparent;
    		border-right: 5px solid transparent;
    		border-top: 6px solid rgb(153, 153, 153);
		} 

		#touxiang .a_touxiang hover{
			color: #333;
		}

		#user #ul_select{
			position: absolute;
			top: 30px;
			    float: left;
				z-index: 1000;
    			display: none;
    			float: left;
    			min-width: 130px;
    			font-size: 14px;
    			text-align: left;
			    background-clip: padding-box;
    			 padding: 5px 0px;
   				 margin: 2px 0px 0px;
   				 list-style: none;
				border-image: initial; 
				border-bottom: 0px solid #969696;
				color: #3f3f3f;
				box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.5);
		}

		#user #ul_select li a span{
			color: white;
			
		}
		#user #ul_select li{
			padding-top:10px;
		}
		#user #ul_select li a span:hover{
			color: #ea6f5a;
		}
		#row{
			width: 960px;
			height: 1000px;
			position: relative;
			margin-left: 270px;
			margin-top: 100px;
		}
		#row_top{
			width: 720px;
			height: 1000px;
		}
		#row_top img{
			width: 690px;
			height: 110px;
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<div id="top">
	<ul>
		<li style="margin:10px 150px 0 20px;font-size: 25px;color: #ea6f5a;" >知否</li>
		<li style="margin-left: 140px;"><a class="white" href="#">发现</a></li>
		<li><a class="white" href="#">关注</a></li>
		<li><a class="white" href="#">消息</a></li> 
		<li><a class="white" href="#"><input type="text" placeholder="搜&nbsp;索"></a></li>
		<li style="margin-left: 580px;"><a class="white" href="#">写文章</a></li>
	</ul>
	<div id="user" id="show_ul" onmouseover="onMouseover()" onmouseout="onMouseout()">
		<div id="touxiang">
			<a class="a_touxiang" href="">
				<img src="picture/timg.jpg" alt="">
			</a>
		</div>
		<ul id="ul_select">
			<li>
			<a href="">
			<i></i>
			<span>我的主页</span>
			</a>
			</li>

			<li>
			<a href="">
			<i></i>
			<span>收藏的文章</span>
			</a>
			</li>

			<li>
			<a href="">
			<i></i>
			<span>喜欢的文章</span>
			</a>
			</li>

			<li>
			<a href="">
			<i></i>
			<span>设置</span>
			</a>
			</li>

			<li>
			<a href="">
			<i></i>
			<span>退出</span>
			</a>
			</li>

		</ul>
	</div><!--user-->
</div><!--  top  -->
<div id="row">
	<div id="row_top">
		<img src="https://cdn2.jianshu.io/assets/web/collect-note-955d8c71641a360924390da9da4b0151.png" alt="">
	</div>
</div>
<script>
	function onMouseover()
{
var tx=document.getElementById("show_ul");
var ul= document.getElementById("ul_select");
ul.style.display="block";//显示下拉列表
}
function onMouseout()
{
var tx=document.getElementById("show_ul");
var ul= document.getElementById("ul_select");
ul.style.display="none";//隐藏
}
</script>
</body>
</html>